<template>
    <view class="page">
        <view class="page-news">
            <view class="news-title">{{newsDetail.title}}</view>
            <view class="news-head">
                <view class="news-head-left">
                    <img :src="File_Url+'system-icon.jpg'" />
                </view>
                <view class="news-head-center">
                    <text class="user-name">省人协</text>
                    <text class="user-time">发布时间：{{(newsDetail.created_at || '').split(' ')[0]}}</text>
                </view>
                <view class="news-head-right">
                    <view class="head-right-item">
                        <img :src="File_Url+'eyes-icon.png'" />
                        <text>{{newsDetail.browse_num}}</text>
                    </view>
                    <view class="head-right-item">
                        <img :src="File_Url+'comment-support-active.png'" v-if="newsDetail.is_like == 1" />
                        <img :src="File_Url+'comment-support.png'" v-else />
                        <text>{{newsDetail.like_num}}</text>
                    </view>
                </view>
            </view>
            <view class="news-tip">
                <text v-for="(item,index) in newsDetail.lable_array" :key="index">{{item}}</text>
            </view>
            <view class="news-content" v-html="newsDetail.info"></view>
        </view>
        <indexPut :inputShow.sync ="inputShow" :Id="newsId" :type="type"></indexPut>
<!--        <view class="hot-comment">-->
<!--            <view class="hot-comment-title">热门评论</view>-->
<!--            <view class="null" v-if="commentList.length==0">-->
<!--                暂无更多评论~-->
<!--            </view>-->
<!--            <view class="hot-comment-item" v-for="(item, index) in commentList" :key="index">-->
<!--                <view class="hot-comment-head">-->
<!--&lt;!&ndash;                    <img :src="File_Url+'system-icon.jpg'" />&ndash;&gt;-->
<!--                    <view class="img">-->
<!--                        <img :src="item.photo_url"/>-->
<!--                        <img class="icon" :src="File_Url+'vip-icon.png'" v-if="item.is_vip==1" />-->
<!--                    </view>-->

<!--                    <text>{{item.nickname}}</text>-->
<!--                </view>-->
<!--                <view class="hot-comment-content" v-html="item.content"></view>-->
<!--                <view class="hot-comment-foot">-->
<!--                    <view class="foot-left">{{item.updated_at}}</view>-->
<!--                    <view class="foot-right">-->
<!--                        <view class="foot-right-item" @click="commentLikeAction(item.id)">-->
<!--                            <img :src="File_Url+'comment-support-active.png'" v-if="item.is_like == 1" />-->
<!--                            <img :src="File_Url+'comment-support.png'" v-else />-->
<!--                            <text>{{item.comment_like_num}}</text>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
<!--            </view>-->
<!--            <view class="hot-comment-more" @click="addComment" v-if="commentTotal!=commentList.length">-->
<!--                查看更多-->
<!--            </view>-->
<!--        </view>-->
        <view class="recommend-needs">
            <view class="recommend-needs-title">推荐需求</view>
            <view class="null" v-if="newsDetail.link_demands.length==0">
                暂无推荐需求~
            </view>
            <view class="recommend-needs-item" v-for="(item, index) in newsDetail.link_demands" :key="index" @click="skipNeedsDetail(item.id)">
                <view class="recommend-needs-head">
                    <text class="needs-title">{{item.title}}</text>
                    <text :class="{'needs-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>

                </view>
                <view class="recommend-needs-content">
                    <view class="recommend-needs-text">{{item.content}}</view>
                    <view class="recommend-needs-tip" v-if="item.label_arr.length>0">
                        <text v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</text>
                    </view>
                    <view class="item-content-img" v-if="item.img_array_url.length>0">
                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill" />
                    </view>
                </view>
                <view class="recommend-needs-foot">
                    <view class="foot-left">
                        <view class="foot-right-item">
                            <img :src="File_Url+'eyes-icon.png'" />
                            <text>{{item.browse_num}}</text>
                        </view>
                        <view class="foot-right-item">
                            <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                            <img :src="File_Url+'collect.png'" v-else/>
                            <text>{{item.attention_num}}</text>
                        </view>
                    </view>
                    <view class="foot-right">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
            <view class="recommend-needs-more" @click="skipNeeds" v-if="newsDetail.link_demands.length>0">查看更多</view>
        </view>
        <view class="page-flex-bottom" v-if="!inputShow">
            <view class="flex-bottom-left" @click.stop="showInput">
                我来说两句
            </view>
            <view class="flex-bottom-right">
                <img :src="File_Url+'news-support-active.png'" v-if="newsDetail.is_like == 1" @click="likeNews" />
                <img :src="File_Url+'news-support.png'" @click="likeNews" v-else/>
                <img :src="File_Url+'needs-collect-active.png'" @click="unFavoriteNews" v-if="newsDetail.is_collection==1" />
                <img :src="File_Url+'needs-collect.png'" @click="favoriteNews" v-else />
                <button open-type='share'><img :src="File_Url+'needs-share.png'" /></button>
            </view>
        </view>
    </view>
</template>

<script>
    import indexPut from "@/pages/components/inputbar/indexput.vue";
    export default {
        name: "newsDetail",
        components: {indexPut},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                newsId:'',
                newsDetail: {},
                inputShow:false,
                type: ''
            }
        },
        onLoad(query){
            this.newsId = query.newsId
        },
        onShow(){
            this.getNewsDetail();
            // this.getNewsComment();
        },
        onShareAppMessage(){
            return {
                title: this.newsDetail.title,
                path: '/pages/details/newsDetail/newsDetail?newsId='+this.newsId
            }
        },
        methods:{
            // dataUpdating(){
            //   this.getNewsComment()
            // },
            //获取资讯详情
            async getNewsDetail(){
              let params = {
                  user_token: uni.getStorageSync('userToken'),
                  id: this.newsId
              }
              const res = await this.$api.getNewsDetail(params);
              if (res.data.level == 'success'){
                  let str = res.data.data;

                  // 正则匹配不含style="" 或 style='' 的img标签
                  const reg1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)", 'gmi')
                  str.info = str.info.replace(reg1, '$2 style=""$3')

                  str.info = str.info.replace(/<img[^>]*>/gi, function (match, capture) {
                      return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, function (mach, capt) {
                          return mach.slice(0,mach.length-1)+'max-width:100%!important;height:auto;"'
                      })
                  });
                  str.info = str.info.replace(/<img[^>]*>/gi, function (match, capture) {
                      return match.replace(/data-src/ig, 'src')
                  });
                  this.newsDetail = str;
              }else {
                  // uni.showToast({
                  //     icon: 'none',
                  //     title: res.data.message,
                  //     duration: 1500
                  // })
                  var _this = this;
                  if (res.data.data==1){
                      uni.showModal({
                          title: res.data.message,
                          content: '是否取消关注/收藏？',
                          success: async res => {
                              if (res.confirm) {
                                  _this.unFavoriteNews();
                              }else if (res.cancel) {
                                  uni.showToast({
                                      icon:'none',
                                      title: "取消成功！",
                                      duration: 3000
                                  })
                                  setTimeout(function () {
                                      uni.navigateBack({
                                          delta:1
                                      })
                                  },3000)
                              }
                          }
                      })
                  } else {
                      setTimeout(function () {
                          uni.navigateBack({
                              delta:1
                          })
                      },1500)
                  }
              }
            },
            // //获取资讯评论
            // async getNewsComment(){
            //     let page = this.commentPage;
            //     let params = {
            //         news_id: this.newsId,
            //         user_token: uni.getStorageSync('userToken'),
            //         page: page,
            //         limit: 2
            //     }
            //     const res = await this.$api.getNewsComment(params);
            //     if (res.data.level == 'success'){
            //         if (page == 1){
            //             this.commentList = res.data.data;
            //         } else {
            //             this.commentList = this.commentList.concat(res.data.data);
            //         }
            //         this.commentTotal = res.data.page_info.total;
            //     }
            // },
            // //查看更多资讯评论
            // addComment(){
            //     this.commentPage++;
            //     this.getNewsComment();
            // },
            //收藏资讯
            async favoriteNews(){
              let params = {
                  user_token: uni.getStorageSync('userToken'),
                  news_id: this.newsId
              }
              const res = await this.$api.favoriteNews(params);
              if (res.data.level == 'success'){
                  uni.showToast({
                      icon:'success',
                      title: res.data.message,
                      duration: 3000
                  })
                  this.getNewsDetail();
              } else {
                  uni.showToast({
                      icon:'none',
                      title: res.data.message,
                      duration: 3000
                  })
                  this.getNewsDetail();
              }
            },
            //取消收藏资讯
            async unFavoriteNews(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    news_id: this.newsId
                }
                const res = await this.$api.unFavoriteNews(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getNewsDetail();
                } else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getNewsDetail();
                }
            },
            //资讯点赞
            async likeNews(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    news_id: this.newsId
                }
                const res = await this.$api.likeNews(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getNewsDetail();
                } else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getNewsDetail();
                }
            },
            //跳转到单位详情
            skipMemberDetail(id){
                uni.navigateTo({
                    url: '/pages/memberUnit/MemberDetail/MemberDetail?memberId='+id
                })
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //跳转需求页面
            skipNeeds(){
                uni.switchTab({
                    url:'/pages/needs/needs'
                })
            },
            showInput(){
                this.inputShow = true
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: calc(100vh - 128rpx);
        padding-bottom: 128rpx;
        background: #F8F8F8;
    }
    .page-news{
        padding: 0 30rpx;
        background: #FFFFFF;
        margin-bottom: 20rpx;
        .news-title{
            @include ellipsis(2);
            margin: 40rpx 0 ;
            max-height: 112rpx;
            line-height: 56rpx;
            color: #333333;
            font-size: 40rpx;
            font-weight: bold;
        }
        .news-head{
            @include flex(flex-start);
            flex-direction: row;
            .news-head-left{
                width: 60rpx;
                height: 60rpx;
                overflow: hidden;
                border-radius: 360rpx;
                margin-right: 16rpx;
            }
            .news-head-center{
                @include flex(flex-start,flex-start);
                flex-direction: column;
                .user-name{
                    color: #333333;
                    height: 30rpx;
                    line-height: 30rpx;
                    font-size: 22rpx;
                    font-weight: bold;
                }
                .user-time{
                    color: #999999;
                    height: 30rpx;
                    line-height: 30rpx;
                    font-size: 22rpx;
                }
            }
            .news-head-right{
                margin-left: auto;
                @include flex(flex-start);
                flex-direction: row;
                .head-right-item{
                    @include flex(flex-start);
                    flex-direction: row;
                    margin-right: 23rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        color: #666666;
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 26rpx;
                    }
                }
                .head-right-item:last-child{
                    margin-right: 0rpx;
                }
            }
        }
        .news-tip{
            padding-top: 40rpx;
            @include flex(flex-start);
            flex-direction: row;
            text{
                background: #3782FF;
                padding: 0 16rpx;
                height: 36rpx;
                line-height: 36rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                margin-right: 10rpx;
                border-radius: 8rpx;
            }
        }
        .news-content{
            padding: 20rpx 0 40rpx 0;
            text{
                font-size: 30rpx;
                line-height: 42rpx;
                margin-bottom: 20rpx;
            }
            img{
                width: 100% !important;
                margin: 20rpx 0;
            }
            video{
                width: 100%;
                margin-bottom: 20rpx;
            }
        }
    }
    .hot-comment{
        background: #FFFFFF;
        margin-bottom: 20rpx;
        .hot-comment-title{
            padding: 20rpx 30rpx;
            border-bottom: 2rpx solid #F1F1F1;
            font-size: 34rpx;
            line-height: 48rpx;
            height: 48rpx;
            font-weight: bold;
        }
        .hot-comment-item{
            padding: 20rpx;
            border-bottom: 2rpx solid #F1F1F1;
            .hot-comment-head{
                @include flex(flex-strat);
                flex-direction: row;
                .img{
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 10rpx;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 360rpx;
                    }
                    .icon{
                        position: absolute;
                        right: 0rpx;
                        width: 30rpx;
                        height: 30rpx;
                        bottom: 0;
                    }
                }
                text{
                    height: 50rpx;
                    line-height: 50rpx;
                    font-size: 24rpx;
                    font-weight: bold;
                }
            }
            .hot-comment-content{
                padding: 0 10rpx;
                font-size: 24rpx;
                line-height: 33rpx;
                max-height: 66rpx;
                margin: 20rpx 0;
                @include ellipsis(2);
            }
            .hot-comment-foot{
                @include flex(flex-start);
                flex-direction: row;
                padding: 0 10rpx;
                .foot-left{
                    color: #9B9B9B;
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
                .foot-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-left: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
            }
        }
        .hot-comment-more{
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            color: #A8A8A8;
            font-size: 28rpx;
        }
    }
    .recommend-needs{
        background: #FFFFFF;
        margin-bottom: 20rpx;
        .recommend-needs-title{
            padding: 20rpx 30rpx;
            border-bottom: 2rpx solid #F1F1F1;
            font-size: 34rpx;
            line-height: 48rpx;
            height: 48rpx;
            font-weight: bold;
        }
        .recommend-needs-item{
            padding: 20rpx 30rpx;
            border-bottom: 2rpx solid #F1F1F1;
            .recommend-needs-head{
                @include flex(flex-strat);
                flex-direction: row;
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                }
                .needs-title{
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .needs-status{
                    margin-left: auto;
                    font-size: 28rpx;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }

            }
            .recommend-needs-content{
                padding: 16rpx 0;
                .recommend-needs-text{
                    font-size: 26rpx;
                    line-height: 37rpx;
                    height: 111rpx;
                    margin-bottom: 16rpx;
                    @include ellipsis(3);
                }
                .recommend-needs-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .recommend-needs-foot{
                @include flex(flex-start);
                flex-direction: row;
                .foot-left{
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-right: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
                .foot-right{
                    margin-left: auto;
                    color: #9B9B9B;
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
            }
        }
        .recommend-needs-more{
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            color: #A8A8A8;
            font-size: 28rpx;
        }
    }
    .page-flex-bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 88rpx;
        width: calc(100vw - 60rpx);
        background: #FFFFFF;
        padding: 20rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-top: 1rpx solid #E5E5E5;
        .flex-bottom-left{
            background: #F1F1F1;
            padding: 20rpx;
            height: 40rpx;
            line-height: 40rpx;
            color: #999999;
            border-radius: 8rpx;
            width: calc(100% - 340rpx);
        }
        .flex-bottom-right{
            margin-left: auto;
            @include flex();
            flex-direction: row;
            button{
                padding: 0;
                margin: 0;
                border: none;
                background: #FFFFFF;
                line-height: normal;
            }
            button::after{
                border: none;
            }
            img{
                width: 60rpx;
                height: 60rpx;
                margin-left: 30rpx;
            }
        }
    }
</style>
